<template>
    <zt-dialog v-model="visible" :title="props.objectValue.name + ' 所有按钮'">
        <zt-table-popup-no-page :tableColumns="columnsDataButton" :tableData="tableData" :showLoading="loading"
            :moreOperations="operationsConfig">
            <template #headerLeft>
                <el-button type="primary" :icon="Plus" @click="handleAddButton">新增按钮</el-button>
            </template>
            <template #moreColumn="{ row, index }">
                <el-button size="small" type="primary" :icon="Edit" @click.stop="handleEdit(row)">修改</el-button>
                <el-button size="small" type="danger" :icon="Delete" @click.stop="handleDelete(row)">删除</el-button>
            </template>
        </zt-table-popup-no-page>
        <add-button-dialog v-model="isButtonVisible" v-if="isButtonVisible" :currentType="currentType"
            :objectValue="objectValue" @success="getDataList" />
    </zt-dialog>
</template>

<script  setup>
import {
    Plus, Delete, Edit
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'

import addButtonDialog from "./add-button-dialog.vue"
import { columnsDataButton } from "../configData.js"
import { apiGetMenuChild } from "@/api/admin/menuManage/api.js"
import { apiDeleteMenu } from "@/api/admin/menuManage/api.js"
// 更多列配置信息
const operationsConfig = {
    title: '操作', //标题
    align: 'center',//居中方式
    width: '200px',//宽度
    fixed: 'right',//固定定位方向
}

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    // 控制弹窗显示
    visible: {
        type: Boolean,
        default: false
    },
    // 传递过来的值
    objectValue: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

// 子组件定义自己的visible
const visible = computed({
    get: () => props.visible,
    set: (value) => {
        emit('update:modelValue', value)
    },
})

const isButtonVisible = ref(false)
const currentType = ref('add') //当前操作类型
const objectValue = ref({})
// 添加 按钮
function handleAddButton() {
    isButtonVisible.value = true
    currentType.value = 'add'
    objectValue.value = {
        menuId: props.objectValue.menuId,
        serial: props.objectValue.serial,
        catalogId: props.objectValue.catalogId,
    }
}

// 修改菜单
function handleEdit(row) {
    currentType.value = 'edit';
    isButtonVisible.value = true
    objectValue.value = row
}

// 删除按钮
const handleDelete = (row) => {
    ElMessageBox.confirm('你是否确认删除该按钮')
        .then(() => {
            apiDeleteMenu({ menuId: row.menuId }, '按钮删除中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '按钮删除成功',
                        type: 'success',
                    })
                    getDataList()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}

// 加载状态
const loading = ref(false)
// 按钮列表数据
const tableData = ref([])
// 所有所有按钮
async function getDataList() {
    loading.value = true
    apiGetMenuChild({
        menuId: props.objectValue.menuId
    }).then(res => {
        tableData.value = res.data
    }).finally(() => {
        loading.value = false
    })
}

onMounted(() => {
    getDataList()
})
</script>

<style lang='scss' scoped></style>